<template>
	<view class="goodstable">
		<goods-list :goods='goods'></goods-list>
		<view class="isOver" v-if="flag">------我是有底线的------</view>
	</view>
</template>

<script>
	import goodList from '../../components/goods-list.vue'
	export default {
		data() {
			return {
				goods:[],
				pageindex:1,
				flag:false
			}
		},
		onLoad(){
			this.getGoodsList()
		},
		components:{
			"goods-list":goodList,
		},
		methods: {
			//获取商品列表数据
			async getGoodsList(){
				const res = await this.$myrequest({
					url:'/api/getgoods?pageindex='+this.pageindex,
				})
				res.data.message.map((item)=>{
					item.img_url ='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fk.zol-img.com.cn%2Fsjbbs%2F6319%2Fa6318644_s.jpg&refer=http%3A%2F%2Fk.zol-img.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619345904&t=dad8736a9b8b687aa936cc7b4aa630c9'
				})
				this.goods = [...this.goods,...res.data.message]
			},
		},
		//下拉触底后加载
		onReachBottom(){
			console.log("触底啦")
			if(this.goods.length<this.pageindex*10) return this.flag = true ;
			this.pageindex++;
			this.getGoodsList()
		},
		//下拉刷新
		onPullDownRefresh() {
			this.pageindex = 1;
			this.goods=[];
			this.flag = false
			setTimeout(()=>{
				this.getGoodsList()
				uni.stopPullDownRefresh()
			},2000)
		}
	}
</script>

<style>
.goodstable{
	background-color: #ccc;
}
.isOver{
	font-size: 25rpx;
	color: #eee;
	text-align: center;
	line-height: 50rpx;
}
</style>
